<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单输入绑定</title>
		<script src="../vue.js"></script>
	</head>
	<body>
		
		<!-- 1 基础用法 -->
		<!-- 1.1 文本 -->
		<div id="app1">
			<input v-model="message" placeholder="edit me" />
			<p> message is: {{message}}</p>
		</div>
		<hr />
		<!-- 1.2 多行文本 -->
		<div id="app2">
			<span>Multiline message is:</span>
			<p style="white-space: pre-line;">{{message}}</p>
			<textarea v-model="message" placeholder="add multiple lines"></textarea>
		</div>
		<hr />
		<!-- 1.3 复选框 -->
		<div id="app3">
			<input type="checkbox" id="checkbox" value v-model="checked" />
			<label for="checkbox">{{checked}}</label>
		</div>
		<hr />
		<div id="app4">
			<input type="checkbox" id='jack' value="jack" v-model="checkedNames" />
			<label for="jack">jack</label>
			<input type="checkbox" id='rose' value="rose" v-model="checkedNames" />
			<label for="rose">rose</label>
			<input type="checkbox" id='witt' value="witt2" v-model="checkedNames" />
			<label for="witt">witt</label>
			<br />
			<span>checked names: {{checkedNames}}</span>
		</div>
		<hr />
		<!-- 1.4 单选按钮 -->
		<div id="app5">
			<input type="radio" id="one" value="One" v-model="picked" />
			<label for="one">One</label>
			<input type="radio" id="two" value="Two" v-model="picked" />
			<label for="one">Two</label>
			<br />
			<span>picked option: {{picked}}</span>
		</div>
		<hr />
		<!-- 1.5 选择框 -->
		<div id="app6">
			<select v-model="selected">
				<option disabled value="">请选择</option>
				<option value="aaa">A</option>
				<option>B</option>
				<option>C</option>
			</select>
			<br />
			<span>selected option: {{selected}}</span>
		</div>
		<!-- 如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。 -->
		<hr />
		<!--   多选时 (绑定到一个数组)： -->
		<div id="app7">
			<select multiple v-model="selected">
				<option disabled value="">请选择</option>
				<option>A</option>
				<option>B</option>
				<option>C</option>
			</select>
			<br />
			<span>selected option2: {{selected}}</span>
		</div>
		<hr />
		<!--   用 v-for 渲染的动态选项： -->
		<div id="app8">
			<select v-model="selected">
				<option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
			</select>
			<br />
			<span>selected option3: {{selected}}</span>
		</div>
		<hr />
		<!-- 2 值绑定 -->
		<!-- 2.1 复选框 -->
		<div id="app9">
			<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />
			<br />
			<span>toggle value: {{toggle}}</span>
		</div>
		<hr />
		<!-- 2.2 单选按钮 -->
		<div id="app10">
			<input type="radio" v-bind:value="a" v-model="pick" />
			<br>
			<span>pick value: {{pick}}</span>
		</div>
		<hr />		
		<!-- 2.3 选择框的选项 -->
		<div id="app11">
			<select v-model="selected">
				<!-- 内联对象字面量（注意：‘{number:123}’是一个对象 ） -->
				<option v-bind:value="{number:123}">123</option>
			</select>
		</div>
		<hr />
		<!-- 3 修饰符 -->
		<!-- 3.1 .lazy -->
		<!-- 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步： -->
		<!-- 在“change”时而非“input”时更新 -->
		<div id="app12">
			<input v-model.lazy='msg' />
			<br />
			<span>msg value: {{msg}}</span>
		</div>
		<hr />
		<!-- 3.2 .number -->
		<!-- 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符： -->
		<div id="app13">
			<input v-model.number='age' type="number" />
			<br />
			<span>age value: {{age}}</span>
		</div>
		<hr />
		<!-- 3.3 .trim -->
		<div id="app14">
			<input v-model.trim='msg' />
			<br />
			<span>msg value: {{msg}}</span>
		</div>
		<hr />
		<!-- 4 在组件上使用 v-model -->
		<hr />
		<script type="text/javascript">
			// 1 基础用法
			// 1.1 文本
			var vm1 = new Vue({
				el: '#app1',
				data: {
					message: "hello"
				}
			})
			// 1.2 多行文本
			new Vue({
				el: '#app2',
				data: {
					message: 'hey'
				}
			})
			// 1.3 复选框
			new Vue({
				el: '#app3',
				data: {
					checked: true
				}
			})
			new Vue({
				el: '#app4',
				data: {
					checkedNames: []
				}
			})
			// 1.4 单选按钮
			new Vue({
				el: '#app5',
				data: {
					picked: ''
				}
			})
			// 1.5 选择框
			new Vue({
				el: '#app6',
				data: {
					selected: ''
				}
			})
			//   多选时 (绑定到一个数组)：
			new Vue({
				el: '#app7',
				data: {
					selected: []
				}
			})
			//   用 v-for 渲染的动态选项：
			new Vue({
				el: '#app8',
				data: {
					selected: '',
					options: [
						{value: '', text: '请选择'},
						{value: 'a', text: 'A'},
						{value: 'b', text: 'B'},
						{value: 'c', text: 'C'},
					]
				}
			})
			// 2 值绑定
			new Vue({
				el: '#app9',
				data: {
					toggle: 'no'
				}
			})
			// 2.1 复选框
			var vm10 = new Vue({
				el: '#app10',
				data: {
					a: 'aaa',
					pick: ''
				}
			})
			// 2.2 单选按钮
			var vm11 = new Vue({
				el: '#app11',
				data: {
					selected: ''
				}
			})
			// 2.3 选择框的选项
			// 3 修饰符
			// 3.1 .lazy
			new Vue({
				el: '#app12',
				data: {
					msg: ''
				}
			})
			// 3.2 .number
			new Vue({
				el: '#app13',
				data: {
					age: ''
				}
			})
			// 3.3 .trim
			var vm14 = new Vue({
				el: '#app14',
				data: {
					msg: ''
				}
			})
			// 4 在组件上使用 v-model
		</script>
	</body>
</html>
